<template>
  <div class="">
    <div class="module-card">
      <h3>题目描述：</h3>
      <div>{{ title }}</div>
    </div>
    <div class="module-card">
      <h3>题目要求：</h3>
      <div
        :class="{ 'margin-top': index !== 0 }"
        v-for="(item, index) in detail"
        :key="index"
      >
        <div class="">{{ item.des }}</div>
        <div v-if="item.example" class="">{{ item.example }}</div>
      </div>
    </div>
    <div class="module-card">
      <input v-model="valueStr" @change="handleChange" />
      <div class="margin-top">结果是：</div>
      <div>{{ resultInfo }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      title: `当内容是英文字母时则用该英文字母的后一个字母替换，同时字母变换大小写,如字母a时则替换为B；字母Z时则替换为a；当内容是数字时则把该数字加1，如0替换1，1替换2，9替换0；其他字符不做变化`,
      detail: [
        {
          des: "输入描述",
          example: "一窜字符串",
        },
        {
          des: "输出描述",
          example: "加密后的字符串",
        },
      ],
      valueStr: "Aa123", // 输入值
      resultInfo: "",
    };
  },
  created() {},
  mounted() {
    this.handleChange();
  },
  beforeDestroy() {},
  computed: {},
  watch: {},
  methods: {
    handleChange() {
      const valueArr = this.valueStr.split("");
      if (!valueArr.length) {
        console.log("ERROR");
        return;
      }
      const regNumber = /\d/;
      const regAlp = /[A-Za-z]/;
      for (let i = valueArr.length - 1; i >= 0; i--) {
        const v = valueArr[i];
        if (regNumber.test(v)) {
          valueArr[i] = v < 9 ? Number(v) + 1 : 0;
        } else if (regAlp.test(v)) {
          if (v == "z") {
            valueArr[i] = "a";
          } else if (v == "Z") {
            valueArr[i] = "A";
          } else {
            const alpNum = v.charCodeAt(0);
            valueArr[i] = String.fromCharCode(alpNum + 1);
          }
        }
      }
      this.resultInfo = valueArr.join("");
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.module-card {
  > h3 {
    font-weight: bolder;
  }
}
.margin-top {
  margin-top: 20px;
}
</style>
